<template>
     <template v-for="menu in menus" :key="menu.path">
      <el-sub-menu v-if="menu.children" :index="menu.path">
        <template #title>
          <el-icon>
            <component :is="menu.meta.icon"></component>
          </el-icon>
          <span>{{ menu.meta.title }}</span>
        </template>
        <menu-bar :menus="menu.children" />
      </el-sub-menu>
      <el-menu-item v-else @click="changeRoute(menu)" :index="menu.path">
        <el-icon>
          <component :is="menu.meta.icon"></component>
        </el-icon>
        <template #title>{{ menu.meta.title }}</template>
      </el-menu-item>
    </template>

</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';


defineProps(['menus'])

const store = useStore();
const router = useRouter();
function changeRoute(menu: { name: any; }) {
  store.commit("SELECTMENU", menu);
  router.push({
    name: menu.name
  })
}

</script>
<style lang="less" scoped>
  
</style>